<template>
  <div class='container'>
    <div class="count">
      <i class="el-icon-info"></i>
      共 {{page.total}} 条记录
    </div>
  <!-- 列表 -->
  <el-table
      :data="Data"
      style="width: 100%;">
      <el-table-column prop="type" label="操作类型" >
      </el-table-column>
      <el-table-column prop="author" label="操作人" >
      </el-table-column>
      <el-table-column prop="title" label="执行结果">
      </el-table-column>
      <el-table-column prop="display_time" label="操作时间">
      </el-table-column>
      <el-table-column prop="forecast" label="描述">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
     <el-pagination
     style="text-align:right; margin-top:20px"
      @next-click = next(1)
      @prev-click = prev(-1)
      :current-page="+page.page"
      :page-sizes="[20, 40, 60, 80]"
      :page-size="20"
      layout="prev, pager, next,sizes, jumper"
      :total="page.total">
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      page: {
        page: 1,
        pagesize: 10,
        total: 0,
        pages: 0 // 总页数
      },
      Data: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 获取列表
    async getList () {
      axios({
        method: 'GET',
        url: 'http://localhost:8080/table/list',
        params: { page: this.page.page }// get请求的参数写在这里面
        // data:{}//post请求的参数写在这里面 如果是文件上传去掉{}直接写对象名即可
      }).then(res => {
        console.log(res.data)
        this.page.total = res.data.total
        this.Data = res.data.items
        this.page.pages = res.data.items.length
      })
      // this.page.page = data.page
      // this.page.pagesize = data.pagesize
    },
    next () {
      if (this.page.page > this.page.pages) return
      this.page.page++
      this.getList()
    },
    prev () {
      if (this.page.page === 1) return
      this.page.page--
      this.getList()
    }

  }
}
</script>

<style scoped lang='less'>
.container {
  margin: 5px 10px 0 10px;
  padding: 20px;
  background-color: #fff;
  .count {
    margin-bottom: 15px;
    background-color: #f4f4f5;
    color: #909399;
    width: 100%;
    padding: 8px 16px;
    border-radius: 4px;
    align-items: center;

  }
}
</style>
